﻿@model XHouse.Model.Ambiente

@{
    ViewBag.Title = "Editar Ambiente";
}

<div class="row">
  <div class="col-xs-12 col-md-10 col-md-offset-1">
    
    <div class="page-header">
      <h3>Editar Ambiente</h3>
    </div>
    
    @using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal", @role = "form", enctype = "multipart/form-data" }))
    {
      if (ViewData.ModelState != null && !ViewData.ModelState.IsValid)
      { 
        <div class="alert alert-danger alert-dismissable">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          @Html.ValidationSummary(false, "Errores:")
        </div>
      }

      <div class="form-group">
        <label class="col-lg-2 control-label">Ambiente #</label>
        <div class="col-lg-4">
          <p class="form-control-static">
            @Html.DisplayTextFor(model => model.Id)
          </p>
        </div>
      </div>
      
      <div class="form-group">
        <label class="col-lg-2 control-label" for="Nombre">@Html.DisplayNameFor(model => model.Nombre)</label>
        <div class="col-lg-4">
          @Html.TextBoxFor(model => model.Nombre, new {@class = "form-control"})
        </div>
      </div>
      
      <div class="form-group">
        <label class="col-lg-2 control-label" for="Descripcion">@Html.DisplayNameFor(model => model.Descripcion)</label>
        <div class="col-lg-4">
          @Html.TextAreaFor(model => model.Descripcion, new {@class = "form-control"})
        </div>
      </div>
      
      <div class="form-group">
        <label class="col-lg-2 control-label">Cantidad de Aparatos: </label>
        <div class="col-lg-1">
          <p class="form-control-static">@(Model.Aparatos != null ? Model.Aparatos.Count.ToString() : "0")</p>
        </div>
      </div>

      @Html.Hidden("hidBorrarImagen")

      <div class="form-group">
        <label class="col-lg-2 control-label" for="imagen">Imagen del ambiente</label>
          
        @* Div que se muestra cuando hay una imagen *@
        <div id="divImagenActual" class="col-lg-4" style="display: @(ViewBag.SrcImagen == null || string.IsNullOrEmpty(ViewBag.SrcImagen) ? "none;" : "block;") ">
          <button type="button" class="close" id="btnQuitarImagen" aria-hidden="true"
                  style="margin-right:5px; margin-top:2px;" onclick="quitarImagen();">&times;</button>
          <a href="#" class="thumbnail">
            <img data-src="holder.js/100%x180" alt="Imagen del ambiente" 
              src="@(ViewBag.SrcImagen == null || string.IsNullOrEmpty(ViewBag.SrcImagen) ? "#" : Url.Content(ViewBag.SrcImagen))">
          </a>
        </div>
          
        @* Div que se muestra cuando no hay una imagen *@
        <div id="divIngresarImagen" class="col-lg-6" style="display: @(ViewBag.SrcImagen == null || string.IsNullOrEmpty(ViewBag.SrcImagen) ? "block;" : "none;") ">
          
          @if (ViewBag.SrcImagen != null || !string.IsNullOrEmpty(ViewBag.SrcImagen))
          {
            <div class="col-lg-8 alert alert-warning">Se ha quitado la imagen anterior (<a class="alert-link" href="javascript:deshacerQuitarImagen();">deshacer</a>).</div>
          }
          
          <input type="file" name="imagen">
          <p class="help-block">Solo se permiten archivos de imagen. La imagen será redimensionada.</p>
        </div>

      </div>
      
      <div class="form-group">
        <div class="col-lg-offset-2 col-lg-3">
          <button class="btn btn-primary" type="submit">Guardar</button>
          <a class="btn btn-danger" href="@Url.Action("Index")">Cancelar</a>
        </div>
      </div>
    }

  </div>
</div>

@section Scripts
{
  <script type="text/javascript">
    function quitarImagen() {
      $('#hidBorrarImagen').val('true');
      $('#divImagenActual').hide();
      $('#divIngresarImagen').show();
    }

    function deshacerQuitarImagen() {
      $('#hidBorrarImagen').val('false');
      $('#divIngresarImagen').hide();
      $('#divImagenActual').show();
    }
  </script>
}
